<template>
	<ul class="table">
		<li class="action" >
			<i class="iconfont">&#xe622;</i>
			<label class="ta_p">首页</label>
		</li>
		<li>
			<i class="iconfont">&#xe6ce;</i>
			<label class="ta_p">消息</label>
		</li>
		<li @click="routerPush()">
			<i class="iconfont">&#xe61d;</i>
			<label class="ta_p">数据</label>
		</li>
		<li>
			<i class="iconfont">&#xe61e;</i>
			<label class="ta_p">我的</label>
		</li>
	</ul>
</template>

<script>
	export default {
		name: 'Table',
		methods:{
			routerPush(){
				this.$router.push('/message')
			}
		}
	}
</script>

<style scoped="scoped">
	.table {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.1rem;
		background-color: #fff;
		text-align: center;
		color: gray;
		position: fixed;
		bottom: 0;
	}

	.table>li {
		flex: 1;
		height: 1.1rem;
		background-color: #fff;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.table li i {
		font-size: 0.4rem;
	}

	.table li .ta_p {
		font-size: 0.3rem;
		margin-top: 0.1rem;
	}

	.action {
		color: #0000EE;
		font-weight: 700;
	}
</style>
